<template>
  <tr>
    <td width="15%">
      <input type="checkbox" v-model="item.isSelected"/>
    </td>
    <td width="35%">
      <div class="pic-box">
        <img :src="item.productCover" alt="" class="pic" />
        <!-- <img src="http://img3.doubanio.com/view/subject/m/public/s33510542.jpg" alt="" class="pic"> -->
        <span>{{ item.productName }}</span>
      </div>
    </td>
    <td width="10%">￥{{ item.productPrice }}</td>
    <td width="10%">
      <input type="number" v-model="item.productCount" min="0" max="100" class="count"/>
    </td>
    <td width="15%">￥{{ totalPrice }}</td>
    <td width="15%">
      <button class="del" @click="delPro(item.id)">删除</button>
    </td>
  </tr>
</template>

<script setup>
import { useDelHook } from './Hooks/useCarBodyHook'
const $props = defineProps({
  item: {
    type: Object,
    require: true,
  },
});
const totalPrice = computed(() => {
  return ($props.item.productPrice * $props.item.productCount).toFixed(2);
});
const delPro = useDelHook()
</script>

<style lang="scss" scoped>
td {
  border: 1px solid #e9ecee;
  padding: 7px;
  .pic-box {
    display: flex;
    align-items: center;
    .pic {
      flex-shrink: 0;
      width: 60px;
      height: 90px;
      margin-right: 5px;
    }
  }
  .count{
    width: 35px;
    height:23px;
  }
  .del {
    color: #fff;
    border-radius: 5px;
    background-color: #dc3545;
    padding-inline: 9px;
    padding-block: 5px;
  }
}
</style>
